import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {createAddPerson} from '../../redux/actions/person'

class Person extends Component {
  addPerson = ()=>{
    const name = this.nameNode.value
    const age = this.ageNode.value
    const personObj = {id: nanoid(), name,age}
    console.log("=========",personObj)
    this.props.createAddPerson(personObj)
    this.nameNode.value = ''
    this.ageNode.value = ''
  }
  render() {
    return (
      <div>
          <h2>我是Person组件,上方组件的总和为：{this.props.count}</h2>
          <input type="text" ref={nameNode=>this.nameNode=nameNode} placeholder='请输入姓名'/>
          <input type="text" ref={ageNode=>this.ageNode=ageNode} placeholder='请输入年龄'/>
          <button onClick={this.addPerson}>添加用户</button>
          <ul>
            {
              this.props.persons.map((personObj)=>{
                return <li key={personObj.id}>{personObj.name} --- {personObj.age}</li>
              })
            }
          </ul>
      </div>
    )
  }
}

export default connect(
  state => ({persons: state.people,count:state.sum}),
  {
    createAddPerson:createAddPerson
  }
)(Person)